<template>
  <div id="technologydecompose">
    <div class="search">
      <el-form :inline="true" :model="searchFrom" class="demo-form-inline" label-position="left">
        <el-row>
          <el-col :xs="24" :sm="10" :md="10" :lg="8">
          <el-form-item label="计划名称：">
          <el-input
            v-model.trim="searchFrom.gcmc"
            placeholder="请输入计划名称"
            style="width: 380px"
          ></el-input>
        </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="10" :md="10" :lg="8">
          <el-form-item label="预计完成时间：">
          <el-date-picker
            v-model="searchFrom.yjwcsjdate"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 380px"
          >
          </el-date-picker>
        </el-form-item>
        </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="10" :md="10" :lg="8">
          <el-form-item label="责任单位：">
          <el-input
            v-model.trim="searchFrom.zrdw"
            placeholder="请输入责任单位"
            style="width: 380px"
          ></el-input>
        </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="10" :md="10" :lg="8">
          <el-form-item label="完成状态：">
          <el-select
              v-model="searchFrom.wczt"
              placeholder="请选择"
              style="width: 380px"
            >
              <el-option
                label="未完成"
                value="0"
              >
              </el-option>
              <el-option
                label="已完成"
                value="1"
              >
              </el-option>
              <el-option
                label="进行中"
                value="2"
              >
              </el-option>
            </el-select>
        </el-form-item>
        </el-col>
        <el-form-item style="margin-left: 0.7143rem">
          <el-button class="generalButton" icon="el-icon-search" @click="search"
            >查询</el-button
          >
          <el-button class="generalButton" icon="el-icon-refresh-right" @click="resetform"
            >重置</el-button
          >
        </el-form-item>
        </el-row>
      </el-form>
      <!-- <div>
        <el-button class="generalButton" icon="el-icon-plus">新增</el-button>
      </div> -->
    </div>
    <div class="table">
      <el-alert style="background: #e6f7ff" :closable="false">
        <span style="color: #64736c">已选择</span>
        <span style="color: #519df8">{{ selectData.length }}</span>
        <span style="padding-right: 1.3571rem; color: #64736c">项</span>
        <span style="color: #519df8; cursor: pointer" @click="clear()"
          >清空</span
        >
      </el-alert>
      <!-- 表格区域 -->
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="tableData"
        row-key="id"
        :tree-props="{ children: 'childrenPlan' }"
        :cell-style="cellStyle"
        highlight-current-row
        :header-cell-style="{
          background: '#2B69A6',
          color: '#fff',
          borderColor: '#BDE1FC',
        }"
        tooltip-effect="dark"
        style="width: 100%; margin-top: 0.8571rem"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection"> </el-table-column>
        <el-table-column align="left" prop="gcmc" label="名称">
        </el-table-column>
        <el-table-column prop="kssj" label="开始时间" align="center">
        </el-table-column>
        <el-table-column prop="yjwcsj" label="预计完成时间" align="center">
        </el-table-column>
        <el-table-column prop="zrdw" label="责任单位" align="center">
        </el-table-column>
        <el-table-column prop="wczt" label="完成状态" align="center">
          <template slot-scope="scope">
            {{ wanchengType(scope.row.wczt) }}
          </template>
        </el-table-column>
        <el-table-column prop="sjwcsj" label="实际完成时间" align="center">
        </el-table-column>
        <el-table-column prop="cgxs" label="成果形式" align="center">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
                type="text"
                style="padding-right: 0.5rem; border-right: 1px solid #f3f3f3"
                v-show="scope.row.jb !== '0'"
                @click="editPlanAdd(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="text"
                style="padding-right: 0.5rem; border-right: 1px solid #f3f3f3"
                @click="addLowerLevel(scope.row)"
                >添加下级</el-button
              >
              <el-button type="text" style="padding-right: 0.5rem" v-show="scope.row.jb !== '0'" @click="deletePlan(scope.row)"
                >删除</el-button
              >
            <!-- <template v-else>
              <el-button
                type="text"
                style="padding-right: 0.5rem"
                @click="addLowerLevel(scope.row)"
                >添加下级</el-button
              >
            </template> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.currentPage"
        :page-sizes="[10, 200, 300, 400]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.pageTotal"
      >
      </el-pagination>
    </div> -->
    <!-- 新增/编辑 计划管理 -->
    <el-dialog
      :visible.sync="planGlidialogVisible"
      width="50%"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="title">
        <div><span>{{mingcheng}}</span></div>
        <div>
          <i
            class="el-icon-close"
            @click="planGlidialogVisible = false"
          ></i>
        </div>
      </div>
      <el-row>
        <el-form
          :model="elForm"
          status-icon
          :rules="elRules"
          ref="elForm"
          label-width="6rem"
          class="elForm"
          id="jhgl"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="计划名称" prop="gcmc">
                <el-input
                  v-model.trim="elForm.gcmc"
                  placeholder="请输入计划名称"
                  maxlength="50"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="开始时间" prop="kssj">
                <el-date-picker
                  @change="datChange"
                  v-model="elForm.kssj"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="预计完成时间" prop="yjwcsj">
                <el-date-picker
                  @change="datChange"
                  v-model="elForm.yjwcsj"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="实际完成时间" prop="sjwcsj">
                <el-date-picker
                  @change="datChange"
                  v-model="elForm.sjwcsj"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="责任单位" prop="zrdw">
                <el-input
                  v-model.trim="elForm.zrdw"
                  placeholder="请输入责任单位"
                  maxlength="50"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="完成状态" prop="wczt">
                <el-select v-model="elForm.wczt" placeholder="请选择">
                  <el-option
                    v-for="item in stateOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="成果形式" prop="cgxs">
                <!-- <el-input
                  v-model.trim="elForm.cgxs"
                  placeholder="请输入成果形式"
                  maxlength="50"
                ></el-input> -->
                <el-select v-model="elForm.cgxs" placeholder="请选择">
                  <el-option
                    v-for="item in resultOptions"
                    :key="item.index"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row>
            <el-col :span="24">
              <el-form-item label="文件上传" prop="planName">
                <el-upload
                  class="upload-demo"
                  action=""
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList"
                  :http-request="httpRequest"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row> -->
        </el-form>
      </el-row>
      <div
        style="
          display: -webkit-flex;
          display: flex;
          -webkit-align-items: center;
          align-items: center;
          -webkit-justify-content: center;
          justify-content: center;
        "
      >
        <el-button type="primary" @click="addPlantgl"
          >确 定</el-button
        >
        <el-button @click="calladdPlant">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getjihuagl, addjihuagl, editjihuagl, deletejihuagl, searchjihuagl } from "@/api/gcxinxigl.js" 
import {Uploadwjzz} from "@/api/jscsdpg.js"
export default {
  components: {
    // addLevelDialog
  },
  data() {
    return {
      loading: false,
      // 新增计划管理ID
      id: '',
      // 标题
      mingcheng: '',
      /* 是否打开对话框 */
      planGlidialogVisible: false,
      /* 新增form */
      elForm: {
        cjr: 'admin',
        gxr: 'admin',
        xlzt: '1',
        sjid: '',
        jb: null
      },
      /* 新增form正则 */
      elRules: {
        gcmc: [{ required: true, message: '请输入计划名称', trigger: 'blur' },
        { max: 50, message: '计划名称录入不可超过50字', trigger: 'blur' },],
        kssj: [
          { required: true, message: '请输入开始日期', trigger: 'blur' },
        ],
        yjwcsj: [
          { required: true, message: '请输入预计完成时间', trigger: 'blur' },
        ],
        zrdw: [{ required: true, message: '请输入责任单位', trigger: 'blur' },
        { max: 50, message: '责任单位录入不可超过50字', trigger: 'blur' },],
        wczt: [
          { required: true, message: '请选择完成状态', trigger: 'blur' },
        ],
        cgxs: [{ required: true, message: '请输入成果形式', trigger: 'blur' },
        { max: 50, message: '成果形式录入不可超过50字', trigger: 'blur' },],
      },
      /* 完成状态 */
      stateOptions: [
        { label: "已完成", value: "1" },
        { label: "未完成", value: "0" },
        { label: "进行中", value: "2" },
      ],
      // 成果形式
      resultOptions: [
        { label: "研究报告", value: "研究报告" },
        { label: "试验报告", value: "试验报告" },
        { label: "样机", value: "样机" },
        { label: "模型", value: "模型" },
        { label: "软件", value: "软件" },
        { label: "其他", value: "其他" }
      ],
      // 选中表格多少跳
      selectData: [],
      fileList: [],
      // 分页
      pageInfo: {
        currentPage: 1,
        pageTotal: 0,
        pageSize: 10,
      },
      // 表单
      searchFrom: {
       yjwcsjdate: []
      },
      // 表格
      tableData: [
      
      ],
      flag: '',
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init() {
      this.loading = true
      getjihuagl().then(res => {
        console.log(res, '计划管理');
        this.tableData = res.data
        this.loading = false
      }).catch(err => {
        console.log(err)
      })
    },
    // 完成状态
    wanchengType(status) {
      const statusObj = {
        0: "未完成",
        1: "已完成",
        2: "进行中"
      };
      return statusObj[status];
    },
    
    /* 文件上传 开始*/
    httpRequest(param) {
      let fileObj = param.file; // 相当于input里取得的files
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      Uploadwjzz(this.id,fd).then(res=>{
        console.log(res);
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    /* 文件上传 结束 */
    /* 日期 */
    datChange() {
      console.log(this.elForm.value1);
    },
    // 添加下级
    addLowerLevel(row) {
      // console.log(row, this.tableData)
      this.planGlidialogVisible = true
      this.mingcheng = '新增计划'
      // 走新增接口
      this.flag = '0'
      this.elForm.sjid = row.id
      this.elForm.jb = row.jb * 1 + 1
      console.log(this.elForm.jb);
    },
    // 编辑
    editPlanAdd(data) {
      this.planGlidialogVisible = true
      this.mingcheng = '计划编辑'
      // 走编辑接口
      this.flag = '1'
      this.elForm = data
    },
    // 添加/编辑计划管理
    addPlantgl() {
      this.$refs['elForm'].validate((value) => {
        if (value) {
          if (this.flag === '0') {
            addjihuagl(this.elForm).then(res => {
            console.log(res, '添加成功')
            this.$message.success('添加成功！')
            this.planGlidialogVisible = false
            this.$refs.elForm.resetFields()
            this.init()
          }).catch(err => {
            console.log(err);
          })
          } else if (this.flag === '1') {
            editjihuagl(this.elForm.id, this.elForm).then(res => {
            // console.log(res, '编辑成功');
            this.$message.success('编辑成功！')
            this.planGlidialogVisible = false
            this.init()
          }).catch(err => {
            console.log(err);
          })
          }
        }
      })
    },
    // 删除
    deletePlan(data) {
      if (data.childrenPlan.length !== 0) {
        this.$confirm('确定要删除该层级下所有子信息吗?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deletejihuagl(data.id, {xlzt: '0'}).then(res => {
            console.log(res)
            this.$message.success('删除成功！')
            this.init()
          }).catch(err => {
            console.log(err)
          })
        }).catch(err => {
          console.log(err)
        })
      } else {
        deletejihuagl(data.id, {xlzt: '0'}).then(res => {
          console.log(res)
          this.$message.success('删除成功！')
          this.init()
        }).catch(err => {
          console.log(err)
        })
      }
    },
    calladdPlant() {
      this.planGlidialogVisible = false
      this.$refs.elForm.resetFields()
    },
    //关闭对话框
    closeDialog() {
      // this.isDialog = false;
    },
    // 查询
    search() {
      console.log(this.searchFrom);
      if (this.searchFrom.yjwcsjdate.length !== 0) {
        // debugger
        this.searchFrom.yjwcsj = this.searchFrom.yjwcsjdate.join('-')
      } else {
        this.searchFrom.yjwcsj = ''
      }
      searchjihuagl(this.searchFrom).then(res => {
        console.log(res, '=====');
        this.tableData = res.data
      }).catch(err => {
        console.log(err);
      })
    },
    // 重置
    resetform() {
      this.searchFrom = {
        yjwcsjdate: [],
        gcmc: '',
        zrdw: '',
        wczt: ''
      }
    },
    // 清除选中项
    clear() {
      (this.selectData = []), this.$refs.multipleTable.clearSelection();
    },
    // 是否关闭经费管理对话框
    closeDialog() {
      // this.isDialog = false;
    },
    // 详情按钮
    managementBtn() {
      // this.isDialog = true;
    },
    handleSelectionChange(val) {
      this.selectData = val;
    },
    // 更改边框颜色
    cellStyle() {
      return "border-color:#BDE1FC;";
    },
    // 页数总数改变
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
    },
    // 当前页数改变
    handleCurrentChange(val) {
      this.pageInfo.currentPage = val;
    },
  },
};
</script>

<style lang="less" scoped>
#technologydecompose {
  background: #fff;
  color: #000;
  padding: 1.4286rem;
}
.search {
  padding-bottom: 0.9286rem;
}
.el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: #bde1fc;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #bde1fc;
}
.title {
  color: #000;
  background: #fff;
  font-size: 1.1429rem;
  height: 3.5714rem;
  display: flex;
  align-items: center;
  padding: 0 1.4286rem;
  border-bottom: 1px solid #eeeeee;
  justify-content: space-between;
}
.pagination {
  padding-top: 0.7143rem;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
/deep/.el-form-item__content .el-select,
.el-form-item__content .el-date-editor {
  width: 100%;
}
</style>